// ExampleComponent.tsx
import { dataKeys } from './dataKeys';
import { useListen } from './useListen';

export const TestA: React.FC = () => {
  const [testValue, setTestValue] = useListen(dataKeys.TEST);
  const [count, setCount] = useListen(dataKeys.COUNT);
  const [isActive, setIsActive] = useListen(dataKeys.IS_ACTIVE);
  const [user, setUser] = useListen(dataKeys.USER);

  const handleClick = () => {
    setTestValue(`Updated at ${new Date().toLocaleTimeString()}`);
    setCount(count + 1);
    setIsActive(!isActive);
  };

  const updateUser = () => {
    setUser({ name: 'John Doe', age: 30 });
  };
  console.log('TestA');
  return (
    <div>
      <h1>TypeSafe Context Example</h1>

      <div>
        <p>Test Value: {testValue}</p>
        <p>Count: {count}</p>
        <p>Is Active: {isActive ? 'Yes' : 'No'}</p>
        <p>
          User: {user.name} ({user.age})
        </p>
      </div>

      <button type="button" onClick={handleClick}>
        Update Values
      </button>
      <button type="button" onClick={updateUser}>
        Update User
      </button>

      {/* 类型安全验证 */}
      <div>
        {/* 这些都会正确类型检查 */}
        {testValue.toUpperCase()} {/* testValue 是 string */}
        {count.toFixed(2)} {/* count 是 number */}
        {isActive ? 'Active' : 'Inactive'} {/* isActive 是 boolean */}
        {user.name.length} {/* user 有 name 和 age 属性 */}
      </div>

      {/* 这些会导致 TypeScript 错误 */}
      {/* 
      setTestValue(123); // Error: number 不能赋值给 string
      setCount("hello"); // Error: string 不能赋值给 number
      setIsActive("true"); // Error: string 不能赋值给 boolean
      setUser({ name: 123 }); // Error: number 不能赋值给 string
      */}
    </div>
  );
};
